import React from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../components/ui/accordion';
import { HelpCircle, ShieldQuestion, Bot, Stethoscope } from 'lucide-react';

const faqSections = [
  {
    icon: <ShieldQuestion className="w-6 h-6 mr-3 text-blue-500" />,
    title: '通用问题',
    questions: [
      {
        q: '医联智导系统是做什么的？',
        a: '本系统是一个智能导诊平台，旨在帮助您在就医前根据自身症状，快速找到可能匹配的科室。它通过模拟医生问诊的方式，为您提供初步的就医建议，并能生成电子病历摘要。',
      },
      {
        q: '使用这个系统需要付费吗？',
        a: '不需要。作为广东医科大学的大创项目，本系统目前免费向所有用户开放，旨在探索和优化AI在医疗导诊领域的应用。',
      },
      {
        q: '我的个人信息和对话内容安全吗？',
        a: '我们非常重视您的隐私安全。所有数据都经过加密传输和存储。您的个人信息和问诊记录仅用于为您提供服务，未经您的允许，不会泄露给任何第三方。',
      },
    ],
  },
  {
    icon: <Bot className="w-6 h-6 mr-3 text-green-500" />,
    title: '智能问诊功能',
    questions: [
      {
        q: '如何开始一次智能问诊？',
        a: '在首页，您可以选择“语音问诊”或“文字问诊”。点击后，即可开始与智能助手对话。请像与真人医生交流一样，尽可能详细地描述您的症状、感受和时长。',
      },
      {
        q: 'AI给出的建议可以直接当做诊断结果吗？',
        a: '不可以。AI提供的科室建议和病历摘要仅供参考，不能替代执业医师的专业诊断。所有医疗决策，请务必咨询线下医生。',
      },
    ],
  },
  {
    icon: <Stethoscope className="w-6 h-6 mr-3 text-red-500" />,
    title: '其他功能',
    questions: [
      {
        q: '“病历查询”功能有什么用？',
        a: '您可以在“病历查询”页面找到您与AI的每一次完整对话记录，以及系统为您生成的病历小结。这有助于您回顾病情，也方便您在线下就诊时向医生提供参考信息。',
      },
      {
        q: '“科室查询”和智能问诊有什么区别？',
        a: '“科室查询”是一个快捷入口，如果您已经明确知道要去哪个科室，可以在这里直接查找。而智能问诊则适用于您不确定该去哪个科室，需要系统根据症状进行推荐的场景。',
      },
    ],
  },
];

export function HelpCenterPage() {
  return (
    <div className="p-4 sm:p-6 lg:p-8 bg-gray-50 min-h-screen">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-12">
          <HelpCircle className="mx-auto h-12 w-12 text-blue-500 mb-4" />
          <h1 className="text-4xl font-bold text-gray-800">帮助中心</h1>
          <p className="mt-2 text-lg text-gray-600">我们在这里为您解答常见问题。</p>
        </div>

        <div className="space-y-10">
          {faqSections.map((section, index) => (
            <div key={index}>
              <h2 className="flex items-center text-2xl font-semibold text-gray-800 mb-4">
                {section.icon}
                {section.title}
              </h2>
              <Accordion type="single" collapsible className="w-full">
                {section.questions.map((faq, qIndex) => (
                  <AccordionItem key={qIndex} value={`item-${index}-${qIndex}`}>
                    <AccordionTrigger className="text-left text-lg font-medium hover:no-underline">
                      {faq.q}
                    </AccordionTrigger>
                    <AccordionContent className="text-base text-gray-700 leading-relaxed pt-2 pb-4">
                      {faq.a}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}